<template>
  <div class="w-h-100">
    <div class="table-top-box">
      <el-button icon="el-icon-plus"
                 size="small"
                 type="primary"
                 @click="addObj">添加</el-button>
      <el-button icon="el-icon-delete"
                 size="small"
                 type="danger"
                 @click="deleteObj">批量删除</el-button>
      <span class="margin-ten">年级：</span>
      <el-select v-model="value" clearable placeholder="请选择" size="small">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <span class="margin-ten">年级主任：</span>
      <el-input v-model="input"
                placeholder="请输入年级"
                size="small"
                style="width: 220px"></el-input>&ensp;
      <el-button icon="el-icon-search"
                 size="small"
                 type="primary"
                 @click="getList">搜索</el-button>
      <el-button icon="el-icon-brush"
                 size="small"
                 type="info"
                 @click="restClick">重置</el-button>
    </div>
    <div style="margin-left: 10px">
      <el-table
          :data="tableData"
          stripe
          height="550"
          style="width: 100%">
        <el-table-column
            label="序号"
            type="index"
            fixed>
        </el-table-column>
        <el-table-column v-for="(item) in columnArr"
                         :prop="item.prop"
                         :label="item.label"
                         :width="item.width">
        </el-table-column>
        <el-table-column
            label="操作"
            width="100"
            fixed="right">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)"
                       type="text"
                       size="small">查看
            </el-button>
            <el-button type="text"
                       size="small"
                       @click="$message.warning('开发中。。。')">编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="添加班级基本信息"
                 :visible.sync="dialogFormVisible"
                 style="height: 600px">
        <el-form :model="form">
          <el-form-item label="ID:" label-width="200">
            <el-input v-model="form.ID" autocomplete="off" class="col-width" placeholder="请输入ID"></el-input>
          </el-form-item>
          <el-form-item label="年级名称:" label-width="200">
            <el-input v-model="form.grade" autocomplete="off" class="col-width" placeholder="请输入年级名称"></el-input>
          </el-form-item>
          <el-form-item label="年级主任" label-width="100">
            <el-input v-model="form.gradeTeacher" autocomplete="off" class="col-width" placeholder="请输入年级主任姓名"></el-input>
          </el-form-item>
          <el-form-item label="邮箱:" label-width="100">
            <el-input v-model="form.email" autocomplete="off" class="col-width" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item label="电话:" label-width="100">
            <el-input v-model="form.phone" autocomplete="off" class="col-width" placeholder="请输入电话"></el-input>
          </el-form-item>
          <el-form-item label="年级介绍:" label-width="100">
            <el-input type="textarea" v-model="form.gradeIntroduce" class="col-width" autocomplete="off"
                      placeholder="请输入年级介绍"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer"
             class="dialog-footer"
             v-show="flag">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="determinate">确 定
          </el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>

export default {
  name: 'index',
  data() {
    return {
      flag:true,
      form: {
        ID:'',
        grade:'',
        gradeTeacher: '',
        email: '',
        phone: '',
        gradeIntroduce: '',
        icon: '',
      },
      dialogFormVisible: false,
      columnArr: [
        {prop: 'ID', label: 'ID', width: 140},
        {prop: 'grade', label: '年级名称', width: 120},
        {prop: 'gradeTeacher', label: '年级主任', width: 120},
        {prop: 'email', label: '邮箱', width: 180},
        {prop: 'phone', label: '电话', width: 180},
        {prop: 'gradeIntroduce', label: '年级介绍', width: 200},
        {prop: 'icon', label: '年级风采', width: 80},
      ],
      tableDataTemp: [],
      tableData: [
        {
          ID:'2023000001',
          grade:'一年级',
          gradeTeacher: '白老师',
          email: '87653422456@qq.com',
          phone: '13135007535',
          gradeIntroduce: '这是一年级！！加油！！！',
          icon: '无',
          option: '一年级',
        },
        {
          ID:'2023000002',
          grade:'二年级',
          gradeTeacher: '陈老师',
          email: '89053422456@qq.com',
          phone: '13132207535',
          gradeIntroduce: '这是二年级！！加油！！！',
          icon: '无',
          option: '二年级',
        },
        {
          ID:'2023000003',
          grade:'三年级',
          gradeTeacher: '王老师',
          email: '87653422956@qq.com',
          phone: '13135007595',
          gradeIntroduce: '这是三年级！！加油！！！',
          icon: '无',
          option: '三年级',
        },
        {
          ID:'2023000004',
          grade:'四年级',
          gradeTeacher: '李老师',
          email: '87653374456@qq.com',
          phone: '13369267535',
          gradeIntroduce: '这是四年级！！加油！！！',
          icon: '无',
          option: '四年级',
        },
        {
          ID:'2023000005',
          grade:'五年级',
          gradeTeacher: '局老师',
          email: '83750422456@qq.com',
          phone: '13124682535',
          gradeIntroduce: '这是五年级！！加油！！！',
          icon: '无',
          option: '五年级',
        },
        {
          ID:'2023000006',
          grade:'六年级',
          gradeTeacher: '金老师',
          email: '87687622456@qq.com',
          phone: '13234007535',
          gradeIntroduce: '这是六年级！！加油！！！',
          icon: '无',
          option: '六年级',
        },
        {
          ID:'2023000007',
          grade:'初一年级',
          gradeTeacher: '奶老师',
          email: '876534298756@qq.com',
          phone: '13135946235',
          gradeIntroduce: '这是初一年级！！加油！！！',
          icon: '无',
          option: '初一年级',
        },
        {
          ID:'2023000008',
          grade:'初二年级',
          gradeTeacher: '刘老师',
          email: '87638642456@qq.com',
          phone: '13137920535',
          gradeIntroduce: '这是初二年级！！加油！！！',
          icon: '无',
          option: '初二年级',
        },
        {
          ID:'2023000009',
          grade:'初三年级',
          gradeTeacher: '沈老师',
          email: '87659753156@qq.com',
          phone: '11575007535',
          gradeIntroduce: '这是初三年级！！加油！！！',
          icon: '无',
          option: '初三年级',
        },],
      input: '',
      value: '',
      options: [
        {
        value: '一年级',
        label: '一年级'
      },
        {
          value: '二年级',
          label: '二年级'
        },
        {
          value: '三年级',
          label: '三年级'
        },
        {
          value: '四年级',
          label: '四年级'
        },
        {
          value: '五年级',
          label: '五年级'
        },
        {
          value: '六年级',
          label: '六年级'
        },
        {
          value: '初一',
          label: '初一'
        },
        {
          value: '初二',
          label: '初二'
        },
        {
          value: '初三',
          label: '初三'
        },
        {
          value: '高一',
          label: '高一'
        },
        {
          value: '高二',
          label: '高二'
        },
        {
          value: '高三',
          label: '高三'
        },],
    }
  },
  methods:{
    determinate() {
      this.tableData.push(this.form)
      this.dialogFormVisible = false
      this.form = {}
      this.$message.success("添加成功")
    },
    handleClick(row) {
      //关闭脚部
      this.flag = false
      //？？？？
      this.form = row
      //显示弹窗
      this.dialogFormVisible = true
    },
    restClick() {
      this.input = ''
      this.value = ''
      this.tableData = this.tableDataTemp
    },
    addObj() {
      //清空表单
      this.form = {}
      //打开他的脚部显示
      this.flag = true
      //Dialog（对话框）中:visible.sync="dialogFormVisible"属性可以控制Dialog对话框的显示与消失
      //用户通过按钮来控制dialogFormVisible的值，从而来控制是否显示弹窗
      this.dialogFormVisible = true
    },
    deleteObj() {
      this.$message.warning("开发中。。。")
    },
    getList() {
      /*value:grade  input:姓名*/
      //如果性别和名称豆存在哪我就执行-->
      if (this.value && this.input ) {//存在：返回ture  如果是undefine || null  || '' 返回 false
        this.tableData = this.tableDataTemp.filter(tag => (tag.grade === this.value && tag.gradeTeacher === this.input))

        return
      }
      if (!this.value && this.input) {
        this.tableData = this.tableDataTemp.filter(tag => (tag.gradeTeacher === this.input))
        return
      }
      if (this.value && !this.input) {
        this.tableData = this.tableDataTemp.filter(tag => (tag.grade === this.value))
        return
      }
      if (!this.value && !this.input) {
        this.tableData = this.tableDataTemp
      }
    }
  },
  mounted() {
    //备份一份
    this.tableDataTemp = this.tableData
  }
}
</script>

<style scoped>
.table-top-box{
  height: 40px;
  margin-left: 10px;
  margin-top: 5px
}
.col-width {
  width: 300px;
}

.margin-ten {
  margin: 0 10px;
}
</style>
